<template>
  <div id="app" ref="imgL">
    <div class="music">
      <div class="img" :class="playFLag === true? 'play' : ''" @click="toPlay">
        <img :src="playFLag === true? cdnUrl + '/assets/index/music.png' : cdnUrl + '/assets/index/musicStop.png'" alt="" />
      </div>
      <audio ref="music">
        <source :src="cdnUrl + '/assets/mp3/bg.mp3'" />
      </audio>
    </div>
    <Load v-if="swiperFlag" @show="showIndex"></Load>
    <Index v-if="flag && !swiperFlag"></Index>
  </div>
</template>

<script>
import Index from './components/Index'
import Load from './components/load/Load'
import ImagesLoaded from 'imagesloaded'
import { getUserInfo, goLogin } from './service'
import { startUrl, shareUrl, cdnUrl } from './service/env'
import { getURLParams } from './utils'
import wx from 'jweixin'
import axios from 'axios'

export default {
  name: 'App',
  data () {
    return {
      flag: false,
      playFLag: false,
      swiperFlag: false,
      cdnUrl: cdnUrl
    }
  },
  components: {
    Index,
    Load
  },
  mounted () {
    this.goShare()
    this.getId()
    document.body.addEventListener('touchmove', this.bodyScroll, false)
    document.addEventListener('WeixinJSBridgeReady', () => {
      this.toPlay()
    }, false)
    ImagesLoaded(this.$refs.imgL, () => {
      this.swiperFlag = true
    })
  },
  methods: {
    bodyScroll (event) {
      event.preventDefault()
    },
    // 获取session_id
    getId () {
      if (getURLParams('code')) {
        this.swiperFlag = true
        goLogin(getURLParams('code')).then((data) => {
          if (data.success === 'false') {
            window.location.replace(startUrl)
          } else {
            localStorage.setItem('session_id', data.data.session_id)
            getUserInfo().then((data) => {
              sessionStorage.setItem('userInfo', JSON.stringify(data.data))
              this.flag = true
            })
          }
        })
      } else {
        // getCode().then()
        window.location.replace(startUrl)
      }
    },
    // 播放音乐
    toPlay () {
      if (this.playFLag) {
        this.playFLag = false
        this.$refs.music.pause()
      } else {
        this.playFLag = true
        this.$refs.music.play()
      }
    },
    // 显示首页
    showIndex () {
      this.swiperFlag = false
    },
    // 分享
    goShare () {
      // getShareParams('onMenuShareTimeline', false, location.href).then((response) => {
      axios({
        method: 'post',
        url: 'https://nk.lanaocn.com/wxCenter/rest/JSSDK.do?method=getConfig',
        data: {
          jsApiList: 'onMenuShareTimeline',
          debug: false,
          url: location.href
        }
      }).then((response) => {
        let _response = response.data.data
        let _appId = _response.appId
        let _timestamp = _response.timestamp
        let _nonceStr = _response.nonceStr
        let _signature = _response.signature
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: _appId, // 必填，公众号的唯一标识
          timestamp: _timestamp, // 必填，生成签名的时间戳
          nonceStr: _nonceStr, // 必填，生成签名的随机串
          signature: _signature, // 必填，签名，见附录1
          jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
            // 'onMenuShareQQ',
            // 'onMenuShareWeibo',
            // 'onMenuShareQZone'
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(() => {
          let shareTitle = '南开文明学院挑战赛'
          let shareDes = '践行文明理念，参与文明创建，争做文明有礼南开人'
          let shareLink = 'https://nk.lanaocn.com/nkdt/rest/share.do'
          let shareImg = shareUrl
          wx.onMenuShareTimeline({
            title: shareTitle, // 分享标题
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {},
            cancel: function () {}
          })

          wx.onMenuShareAppMessage({
            title: shareTitle, // 分享标题
            desc: shareDes, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {},
            cancel: function () {}
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
#app {
  .music{
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 100;
    .img{
      width: 30px;
      height: 30px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .play{
      animation:changDeg 2s linear 0.2s infinite;
    }
    @keyframes changDeg{
      0%{
        transform: rotate(0deg);
      }
      100%{
        transform: rotate(360deg);
      }
    }
  }
}
</style>
